<template>
	<up-tabbar :value="curTab" fixed @change="changeTab">
		<up-tabbar-item name="/pages/index/index" text="首页" icon="home"></up-tabbar-item>
		<up-tabbar-item name="/pages/chat/chat" text="消息" badge="12">
			<tempalte #active-icon>
				<image class="tab-img" src="../../static/map_active.png"></image>
			</tempalte>
			<tempalte #inactive-icon>
				<image class="tab-img" src="../../static/map.png"></image>
			</tempalte>
		</up-tabbar-item>
		<up-tabbar-item name="/pages/my/my" text="我的" icon="account"></up-tabbar-item>
	</up-tabbar>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// up-tabbar组件上的value属性
	const curTab = ref('B')

	// 需求1：当前页面对应的tab高亮展示
	// 获取当前页面信息，确认当前页面是哪一个页面？
	// 获取到当前页面的路径，就能确认是哪一个页面
	const pagesArr = getCurrentPages()
	const curPage = pagesArr[pagesArr.length - 1]
	curTab.value = '/' + curPage.route


	// 需求2：点击对应tab跳转到对应的页面
	const changeTab = (name) => {
		console.log(name)
		uni.navigateTo({
			url: name
		})
	}
</script>

<style lang="scss" scoped>
	.tab-img {
		width: 40rpx;
		height: 40rpx;
	}
</style>